<template>
	<div style="margin-left: 20px" v-if="conditions && conditions.length > 0">
		<div v-for="(condition,index) in conditions" :key="index">
			<el-row style="margin-bottom: 10px" :gutter="30">
				<el-col :span="3">
					<span class="el-button el-button--text el-button--small default-text">条件{{index + 1}}</span>
				</el-col>
				<el-col :span="5">
					<el-select v-model="condition.field">
						<el-option
							v-for="(field, innerIndex) in fields"
							:key="innerIndex"
							:value="field.value"
							:label="field.label"
						>
							<span
								class="full-width full-height"
								@click="selectChange('field', field.value, condition.id)"
							>{{field.label}}</span>
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3">
					<el-select v-model="condition.relation">
						<el-option
							v-for="(relation, innerIndex) in relations"
							:key="innerIndex"
							:value="relation.value"
							:label="relation.label"
						>
							<span
								class="full-width full-height"
								@click="selectChange( 'relation', relation.value, condition.id)"
							>{{relation.label}}</span>
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="5">
					<el-input
						placeholder="请输入"
						v-model="condition.value"
						@blur="setValue(condition.value, condition.id)"
					/>
				</el-col>
				<el-col :span="4">
					<el-button type="text" @click="addSubCondition(condition.id)">嵌套条件设置</el-button>
				</el-col>
				<el-col :span="4" v-if="index === conditions.length - 1">
					<el-button type="text" @click="addCondition(condition.parentId)">添加</el-button>
					<el-button type="text" @click="deleteCondition(condition.id)" v-if="index > 0">删除</el-button>
				</el-col>
			</el-row>

			<query-condition
				@addCondition="handlerAddCondition"
				@addSubCondition="handlerAddSubCondition"
				@deleteCondition="handlerDeleteCondition"
				@selectChange="handlerSelectChange"
				@setValue="handlerSetValue"
				:conditions="condition.conditions"
			></query-condition>
		</div>
	</div>
</template>
<script>
export default {
	name: "queryCondition",
	props: {
		conditions: {
			type: Array,
			required: false
		}
	},
	mounted() {},
	data() {
		return {
			fields: [
				{
					label: "姓名",
					value: "1"
				},
				{
					label: "年龄",
					value: "2"
				}
			],
			relations: [
				{
					label: "=",
					value: "1"
				},
				{
					label: ">",
					value: "2"
				}
			]
		};
	},
	methods: {
		addSubCondition(conditionId) {
			this.$emit("addSubCondition", conditionId);
		},
		addCondition(parentConditionId) {
			this.$emit("addCondition", parentConditionId);
		},
		deleteCondition(conditionId) {
			this.$emit("deleteCondition", conditionId);
		},
		selectChange(key, value, conditionId) {
			this.$emit("selectChange", key, value, conditionId);
		},
		setValue(value, conditionId) {
			this.$emit("setValue", value, conditionId);
		},
		handlerDeleteCondition(conditionId) {
			this.deleteCondition(conditionId);
		},
		handlerAddSubCondition(conditionId) {
			this.addSubCondition(conditionId);
		},
		handlerAddCondition(parentConditionId) {
			this.addCondition(parentConditionId);
		},
		handlerSelectChange(key, value, conditionId) {
			this.selectChange(key, value, conditionId);
		},
		handlerSetValue(value, conditionId) {
			this.setValue(value, conditionId);
		}
	}
};
</script>
<style >
.full-width {
	display: inline-block;
	width: 100%;
}
.full-height {
	display: inline-block;
	height: 100%；;
}
</style>
